<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title></title>
    <style>
      html,
      body {
        height: 100%;
        border: 0;
        margin: 0;
        background: #FFFFFF;
      }
      .app-container {
        /*background: url('./images/air_2.jpg') no-repeat center;*/

        height: 100%;
        z-index: -1;
        background-size: contain;
        min-height: max-content;




      }
      /*.app-container::-webkit-scrollbar-track{*/
      /*  background: #5bc0de;*/
      /*}*/

      .header {
        height: 1rem;
        width: 100%;
        color: white;
        font-size: 28px;
        text-align: center;
      }
      .btn-primary {
        color: #fff;
        background-color: #4b8df8;
        border-color: #4b8df8;
        /*position: absolute;
        top: 18px;
        left: 10px;*/
        width: 60px;
        height: 0.5rem;
        border-radius: 5px;
      }
      .btn-primary .btn-back {

      }
      .header img {
        height: 55px;
        z-index: 99;
        padding: 5px;
        width: 159px;
        margin-top: 10px;
      }
      .content {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
      }
      .content .loge {
        height: 0.5rem;
      }
      .content .title {
        color: white;
        font: 0.5rem bold;
        margin-top: -12px;
      }

      .content .data {
        font-size: 8px;
        border-collapse: collapse;
      }
      .content .data th {
        font-size: 18px;
      }
      .content .data td {
        font-size: 16px;
      }


      .content .aqi {
        color: white;
        font-size: 20px;
      }

      .content .btns {
        margin-top: 20px;
      }
      .content .btns a {
        display: block;
        margin: 15px 0;
        font-size: 0.5rem;
      }

      .chart {
        width: 95%;
        height: 3rem;
      }

      .foot {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 26px;
      }

      .foot img {
        height: 2rem;
        padding: 5px;
      }

    </style>
</head>

<body>
    <div class="app-container">
      <!--<div id="fpointName" class="header"></div>-->
      <div align="left">
        <span id="fmoniterPm102" style="flex: 1;text-align: left; margin-left: 25px; padding-top: 0.6rem;"><button class="btn-primary" onclick="javascript:history.go(-1)">返回 </button></span>
        <span style="flex: 1;text-align: left; padding-top: 0.6rem;"><button id="btn1" class="btn-primary">当前 </button></span>
        <span style="flex: 1;text-align: left; padding-top: 0.6rem;"><button disabled id="btn2" class="btn-primary">24小时 </button></span>
        <span style="flex: 1;text-align: left; padding-top: 0.6rem;"><button disabled id="btn3" class="btn-primary">本周 </button></span>
      </div>
      <div class="content">
        <div>
          <div id="tab1">
            <div id="CO2" style="width: 95%; height: 3rem"></div>
              <div id="PM25" style="width: 95%; height: 3rem"></div>
              <div id="PM10" style="width: 95%; height: 3rem"></div>
              <div id="HCHO" style="width: 95%; height: 3rem"></div>
              <div id="TVOC" style="width: 95%; height: 3rem"></div>
              <div id="温度" style="width: 95%; height: 3rem"></div>
              <div id="湿度" style="width: 95%; height: 3rem"></div>
          </div>
          <div id="tab2" class="content">
              <div id="CO22" style="width: 95%; height: 3rem"></div>
              <div id="PM252" style="width: 95%; height: 3rem"></div>
              <div id="PM102" style="width: 95%; height: 3rem"></div>
              <div id="HCHO2" style="width: 95%; height: 3rem"></div>
              <div id="TVOC2" style="width: 95%; height: 3rem"></div>
              <div id="温度2" style="width: 95%; height: 3rem"></div>
              <div id="湿度2" style="width: 95%; height: 3rem"></div>
          </div>
          <div id="tab3" class="content">
              <div id="CO23" style="width: 95%; height: 3rem"></div>
              <div id="PM253" style="width: 95%; height: 3rem"></div>
              <div id="PM103" style="width: 95%; height: 3rem"></div>
              <div id="HCHO3" style="width: 95%; height: 3rem"></div>
              <div id="TVOC3" style="width: 95%; height: 3rem"></div>
              <div id="温度3" style="width: 95%; height: 3rem"></div>
              <div id="湿度3" style="width: 95%; height: 3rem"></div>
          </div>
        </div>
        <div class="data">
          <table border="1" id="table" style="width: 95%; padding-left: 10px;">
            <thead>
            <tr>
              <th>时间</th>
              <th>报警信息</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
    <script src="js/echarts.min.js"></script>
      <script>
        $(function () {
          var $btn1 = $('#btn1')
          var $btn2 = $('#btn2')
          var $btn3 = $('#btn3')

          $btn1.on('click',function () {
            var $tab=$("#tab1");
            $tab.show();
            $tab.siblings().hide();
            $btn1.css('background','#20c080')
            $btn2.css('background','#4b8df8')
            $btn3.css('background','#4b8df8')
          })
          // $btn1.trigger('click')
          $btn2.on('click',function () {
            var $tab=$("#tab2");
            // $tab.addClass('chart')
            $tab.show();
            $tab.siblings().hide();
            $btn2.css('background','#20c080')
            $btn1.css('background','#4b8df8')
            $btn3.css('background','#4b8df8')
          })
          $btn3.on('click',function () {
            var $tab=$("#tab3");
            $tab.show();
            $tab.siblings().hide();
            $btn3.css('background','#20c080')
            $btn2.css('background','#4b8df8')
            $btn1.css('background','#4b8df8')
          })
        })

        // var boxId = '00088'
        // var fpointNo = '519465'
        var boxId = sessionStorage.getItem("boxId")
        var fpointNo = sessionStorage.getItem("fpointNo")
        window.onload = function() {
            getRem(1000, 100)

          getAirData()
          setTimeout(function () {
            $('#btn1').trigger('click')
          },100)
          setTimeout(function () {
            $('#btn2').attr('disabled', false)
            $('#btn3').attr('disabled', false)
          },2000)

          setInterval(function () {
          // setTimeout(function () {
            getAirData()
          },3000)
        };
        window.onresize = function() {
            getRem(1000, 100)
        };

        function showChartPie(categories, datas, name0, num, fcolor) {
          // 基于准备好的dom，初始化echarts实例
          const myChart = echarts.init(document.getElementById(name0 + num))
          // 绘制图表
          myChart.setOption({
            title: {
              text: name0,
              left: 'center'
            },
            xAxis: {
              name: '时间',
              type: 'category',
              data: categories
            },
            yAxis: {
              scale: true,
              type: 'value'
            },
            series: {
              data: datas,
              type: 'line',
              color: fcolor,
              min: 'dataMin',
              label: {
                show: true
              }
            },
            tooltip: {
              trigger: 'axis'
            }
          })
        }

        function formartDate(date0) {
          var date = new Date(date0)
          var ym
          var d = date.getHours()
          var f = date.getMinutes()
          var m = date.getSeconds()
          if (m < 10) {
            m = '0' + m
          }
          if (f < 10) {
            f = '0' + f
          }
          if (d < 10) {
            d = '0' + d
          }
          ym = d + ':' + f + ':' + m
          return ym
        }

        function getAirData() {
          //取报警信息
          $.ajax({
            type:'GET',
            url:'http://' + window.location.host +'/phonePage/getAirwarringByFpointNo', //'http://127.0.0.1:8080
            data:{fpointNo},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                var $body=  $("#table>tbody");
                $body.empty()
                // var list = res.data
                /*var list = [{fgetdate:'10:03', fdescribe:'co2轻微超标'},
                  {fgetdate:'10:08', fdescribe:'co2中度超标'},
                  {fgetdate:'10:17', fdescribe:'co2超标'}, ]*/
                var list = res.data.list
                var $tr;
                $.each(list,function (inx,item) {
                  $tr=$(`<tr><td>${formartDate(item.fgetdate)}</td><td>${item.fdescribe}</td></tr>`);
                  $body.append($tr);
                })
              }else{
                console.log(res.msg);
              }
            }
          });
          //取空气数据
          $.ajax({
            type:'GET',
            url:'http://' + window.location.host + '/phonePage/getAirDataByBoxId', //'http://127.0.0.1:8080'
            data:{boxId},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                const categories = res.data.list.map(function(item) {
                  return formartDate(item.time)
                })
                var datas = res.data.list.map(function(item) {
                  return item.co2
                })
                showChartPie(categories, datas, 'CO2', '', '#00FFFF')
                datas = res.data.list.map(function(item) {
                  return item.pm25
                })
                showChartPie(categories, datas, 'PM25', '', '#FF1493')
                datas = res.data.list.map(function(item) {
                  return item.hcho
                })
                showChartPie(categories, datas, 'HCHO', '', '#8A2BE2')
                datas = res.data.list.map(function(item) {
                  return item.tvoc
                })
                showChartPie(categories, datas, 'TVOC', '', '#0000FF')
                datas = res.data.list.map(function(item) {
                  return item.pm10
                })
                showChartPie(categories, datas, 'PM10', '', '#330000')
                datas = res.data.list.map(function(item) {
                  return item.t
                })
                showChartPie(categories, datas, '温度', '', '#2E8B57')
                datas = res.data.list.map(function(item) {
                  return item.h
                })
                showChartPie(categories, datas, '湿度', '', '#D2691E')
              }else{
                console.log(res.msg);
              }
            }
          });
          //取空气数据 24小时
          $.ajax({
            type:'GET',
            url:'http://' + window.location.host + '/phonePage/getAirHourDataByBoxId', //'http://127.0.0.1:8080'
            data:{fpointNo},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                const categories = res.data.list.map(function(item) {
                  return item.fhour
                })
                var datas = res.data.list.map(function(item) {
                  return item.co2
                })
                showChartPie(categories, datas, 'CO2', '2', '#00FFFF')
                datas = res.data.list.map(function(item) {
                  return item.pm25
                })
                showChartPie(categories, datas, 'PM25', '2', '#FF1493')
                datas = res.data.list.map(function(item) {
                  return item.hcho
                })
                showChartPie(categories, datas, 'HCHO', '2', '#8A2BE2')
                datas = res.data.list.map(function(item) {
                  return item.tvoc
                })
                showChartPie(categories, datas, 'TVOC', '2', '#0000FF')
                datas = res.data.list.map(function(item) {
                  return item.pm10
                })
                showChartPie(categories, datas, 'PM10', '2', '#330000')
                datas = res.data.list.map(function(item) {
                  return item.t
                })
                showChartPie(categories, datas, '温度', '2', '#2E8B57')
                datas = res.data.list.map(function(item) {
                  return item.h
                })
                showChartPie(categories, datas, '湿度', '2', '#D2691E')
              }else{
                console.log(res.msg);
              }
            }
          });
          //取空气数据 本周
          $.ajax({
            type:'GET',
            url:'http://' + window.location.host + '/phonePage/getAirDayDataByBoxId', //'http://127.0.0.1:8080'
            data:{fpointNo},
            dataType:'JSON',
            error:function(){
              console.log('获取数据失败');
            },
            success:function(res){
              if(res.code===200){
                const categories = res.data.list.map(function(item) {
                  return item.fhour
                })
                var datas = res.data.list.map(function(item) {
                  return item.co2
                })
                showChartPie(categories, datas, 'CO2', '3', '#00FFFF')
                datas = res.data.list.map(function(item) {
                  return item.pm25
                })
                showChartPie(categories, datas, 'PM25', '3', '#FF1493')
                datas = res.data.list.map(function(item) {
                  return item.hcho
                })
                showChartPie(categories, datas, 'HCHO', '3', '#8A2BE2')
                datas = res.data.list.map(function(item) {
                  return item.tvoc
                })
                showChartPie(categories, datas, 'TVOC', '3', '#0000FF')
                datas = res.data.list.map(function(item) {
                  return item.pm10
                })
                showChartPie(categories, datas, 'PM10', '3', '#330000')
                datas = res.data.list.map(function(item) {
                  return item.t
                })
                showChartPie(categories, datas, '温度', '3', '#2E8B57')
                datas = res.data.list.map(function(item) {
                  return item.h
                })
                showChartPie(categories, datas, '湿度', '3', '#D2691E')
              }else{
                console.log(res.msg);
              }
            }
          });
        }

        function getRem(pHeight, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oHeight = document.body.clientHeight || document.documentElement.clientHeight;
            html.style.fontSize = oHeight / pHeight * prem + "px";
        }
    </script>
</body>

</html>
